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The  big  picture... 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN' 
'http://www.w3.org/TR/xhtml  I /DTD/xhtml 


<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang=" 
<head> 

<title>University  of  Michigan</title> 


A web  server  produces  HTML 
which  is  handed  to  a browser  which 
needs  to  la/  it  out  in  a blink  of  an 
eye  and  have  it  pixel  perfect  as  god 
as  a print  brochure. 


HTML 


• A way  of  marking  up  text  to  indicate  that  some  text  is  different  than 
other  text 

• We  “tag”  portions  of  the  text  to  communicate  meaning 
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Whitespace  and 
line  wrapping. 


f . powered  by 
1^0,  Gogle  App  Engine  | 

Home 
Announcements 
Resources 
Podcasts 
Polls 
Chat  Room 
Email  Archive 
Calendar 
Instructor  IM 
Software 
Site  Info 
SI  539  F08 


Email  Archive 


You  are  authorized  to  send  email  from:  csev@umich.edu 

Email  sent  to  the  following  addresses  will  be  archived  and  sent  to  participants: 


si539@ctools.umich.edu 
Ur.r  liir.K - -1  i , r.,  J - 1:  jrJ 


27b2066ac545@ctools.  umich.edu 


GD 

Viewing  1 • 20  of  446  items 
show  20  items...  t ] (T")  (~>T) 

From 

Subject 

Date  Received  7 

Anthony  Whyte 
<arwhyte@umich.edu> 

Google  Chrome  comic  book  & 

Sep  2,  2008  10:58  AM  EDT 

<li> 


<a  href="mailto:si539@ctools. umich.edu" 

title="Send  mail  to  si539@ctools.umich.edu"> 
si539@ctools.umich.edu 
</a> 

</li> 


Learning  from 
“View  Source” 


Evolution  of  HTML 


The  Web  is  a Young  Technology 


• Invented  in  early  I990’s 

• Popular  in  1994 

• Robert  Cailliau  - 
coFounder  of  theWorld- 
Wide-Web 


http://www.dr-chuck.conn/media.php?id=70 


Eile  Edit  View  Go  ! 
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HTML  has  evolved  a *lot*  over 
the  years  - as  computers  and 
networks  have  gotten  faster. 


An  Iterative  Process 


• Designers  want  to  do  something 

• They  figure  out  how  to  do  it  with  current  generation  browsers 

• We  figure  out  requirements  - but  HMTL  gets  uglier  and  quirkier  - then  the 
HTML  starts  to  break 

• We  develop  new  standards  that  handle  new  requirements  in  an  elegant 
manner 

• New  Browsers  arrive  in  the  marketplace  with  the  new  standard 


History  of  HTML  / CSS 

• HTML  1 .0  - 1 993  - The  Good  Old  Days  - life  was  simple 

• HTML  2.0  - 1995  - Some  interesting  layout  features  - abused 

• CSS  I - 1996 

• HTML  3.2 -1997 

• HTML  4.0  - 1 997  - Layout  moving  toward  CSS 

• CSS  Level  2-  1998 


• HTML  4.01  - 1 999 -What  we  use  today 


HTML  has  evolved  a *lot*  over 
the  years  - as  computers  and 
networks  have  gotten  faster. 


The  Good  Old  Days 


<h  I >Hello  World</h  I > 
Hi  there. 

<p><img  src=”x.gif”> 

A Paragraph 
<ul> 

<li>List  one 
<li>List  2 
</ul> 


In  the  good  old  days  you 
wrote  HTML  and  browsers 
displayed  it  - since  we  wrote  it 
by  hand  - and  modems  were 
slow  - it  was  never  too  long 
and  never  too  complex.  The 
browser  was  never  the  rate 
limiting  factor. 

Writing  HTML  was  like  using 
a simple,  weak  word 
processor.  The  tags  acted  as 
formatting  commands  to  the 
browser 


The  Ugly  Middle  Ages 


• Web  Designers  designed  to  browser  capabilities  - down  to  particular  minor 
versions  of  browsers. 

• Extensive  testing  was  needed  on  lots  of  browsers 

• Designers  used  tables,  nested  tables,  and  chopped  up  graphics  to  gain  control 
of  the  look  and  feel  or  web  pages  to  produce  a “print-like”  experience. 

• HTML  was  UGLY,  Hard  to  develop,  and  brittle  - what  looked  superb  on  one 
browser  - often  was  broken  on  another  browser  - even  a later  release  of  the 
same  b rower. 


The  Modern  Era 


• HTML  is  clean  and  simple 

• There  is  no  presentation  in  HTML  - font,  color,  spacing,  etc  etc 

• No  use  of  tables  except  for  tabular  data 

• CSS  controls  all  layout,  and  look  and  feel 

• Still  a bit  challenging  - but  converging 


1990-1994 

HTML  was  simple  and  pages  looked  pretty  ugly. 

1995-1999 

HTML  became  more  complex  and  each  browser 
was  different. 

2000-2005 

Browsers  slowly  supported  CSS  to  varying  levels. 
HTML  was  still  ugly  to  support  multiple  browsers. 

2005-2008 

New  browsers  supported  CSS.  Old  browsers  were 
still  pretty  pervasive  but  diminishing. 

2009+ 

The  last  “pre-CSS”  browser  (IE5)  is  < 0.1% 

http://www.w3schools.com/browsers/browsers_stats.asp 


What  does  this  mean  for  us? 


• Don’t  bother  with  the  intermediate  steps  :) 

• Either  keep  it  simple  - or  do  it  well  - simple  does  work 

• If  you  want  a professional  site  use  all  of  the  best  practices 

• Presentation  in  CSS  + Semantic  markup  in  HTML 

• http://validator.w3.org/ 


• http://jigsaw.w3.org/css-validator/ 
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Whitespace  and 
line  wrapping. 


Tags  have  a beginning  and  end... 


<h  I >Google  App  Engine: About</h  I > 
<p>Welcome  to  the  site  dedicated  to 
learning  the  Google  Application 
Engine. We  hope  you  find 
www.appenginelearn.com  useful. </p> 


HTML  Tag  Basics 


Start  tag 


Tags  “mark  up”  the  HTML 
document.  The  tags  are  read  and 
interpreted  by  the  browser  - but 
now  shown. 


<h  I >Hello  World</h  I > 


End  tag 


s' 

<img  src=”x.gif”  /> 


Attribute 


A self  closing  tag  does  not  need  a 
corresponding  end  tag. 


Self-closing  tag 


What  about  < ‘s  in  HTML? 


special.htm 

<h  I >HTML:  Special  Characters</h  I > «|  file:///Users/csev/Desktop/teach/ap  - Q.-  Google  » 


<p> 

Special  characters  are  indicated  by 
the  &amp;  character.  We  can  use  this 
to  display  &lt;  and  &gt; 

</p> 


HTML:  Special  Characters 


Special  characters  arc  indicated  by  the  & character.  We  can 
use  this  to  display  < and  >. 


Entity 

Symbol 

&g-t ; 

> 

&lt; 

< 

&amp; 

& 

&pound; 

£ 

&copy; 

© 

&trade; 

HTML  Links 


• One  of  the  key  things  about  HTML  is  making  a set  of  pages  and 
making  “hypertext”  links  amongst  those  pages 

• Links  are  what  make  the  “web”  a “web”  - it  is  a web  of  interlinked 
documents. 

• The  interlinked  nature  of  the  web  leads  to  the  “knowledge  “ the 
search  engines  like  Google  appear  to  have 


<h  I >The  First  Page</h  I > 

<P> 

If  you  like,  you  can  switch  to  the 
<a  href="http://www.dr-chuck.com/page2.htm"> 
Second  Page</a>. 

</p> 

A link  is  a “hot  spot”  on  the  page.  It 
can  be  text  or  an  image.  Often  it  is 
visually  marked  to  make  it  easier  to 
“notice”  so  as  to  engouage  users  to 
click! 


''OH  http://www.dr-chuck.com/pagel.htm 
+ 1 0 http://www.dr-chuck.eom/p  C Or  Google  » 


The  First  Page 

If  you  like,  you  can  switch  to  the  Second  Page. 


“a”  is  short  for  “anchor”  and  “href” 
is  short  for  “hypertext  reference” 


<h  I >The  Second  Page</h  I > 

<P> 

If  you  like,  you  can  switch  back  to  the 


<a  h ref  =" page  l.htnn"> 
First  Page</a>. 

</p> 

A link  is  a “hot  spot”  on  the  page.  It 
can  be  text  or  an  image.  Often  it  is 
visually  marked  to  make  it  easier  to 
“notice”  so  as  to  engouage  users  to 
click! 

“a”  is  short  for  “anchor”  and  “href” 
is  short  for  “hypertext  reference” 


OQO  http://www.dr-chuck.com/page2.htm 
[ + | Q http://www.dr-chuck.eom/p  C Or  Coogle  » 


The  Second  Page 

If  you  like,  you  can  switch  back  to  the  First  Page. 


Absolute  .vs.  Relative 

<a  href="http://www.dr-chuck.com/page2.htnn">Second  Page</a> 

Hypertext  references  can  be  a full  URL  - and  refer  to  some  other 
page  on  anywhere  on  the  Internet. 

<a  href="pagel  .htm"> First  Page</a> 

Or  the  reference  can  be  a file  name  that  is  assumed  to  be  in  the 
same  folder  as  the  current  document  (relative  reference). 


Navigation  With  Anchor  Tags 


• Sometimes  we  want  to  make  a menu  that  provides  our  users 
consistent  navigation  across  page. 


OAuth:  Community 

◄ | + 0 http://oauth.net/community  6 Q»  Google 

J 

OAUTH  About  Advisories  Documentation  Code  Blog  Community 

Chat  Mailing  Usts 

COMMUNITY 

The  OAuth  community  is  dedicated  improving  the  spec  and  library  codebase,  spreading  awareness  of 
the  protocol  and  documenting  and  showing,  through  screencasts,  wireframes,  mockups  and  other 

* 

illustrative  designs,  how  best  to  put  OAuth  into  use. 


A List 


<h  I ><a  href="index.htnn">AppEngineLearn</a></h  I > 
<ul> 


<li><a  href="sites.htm">Sites</a></li> 
<li><a  href="topics.htm"  >Topics</a></li> 
</ul> 

<h  I >Google  App  Engine:  About</h  I > 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com 
useful. 

</p> 
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A List  of  Links 
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</ul> 
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learning  the  Google  Application  Engine. 
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useful. 
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Multiple  Files 


• We  can  put  multiple  files  in  the  same  directory  and  then  use  them  in 
relative  links. 

csev$  Is  -I 

-rw-r-r-  I csev  staff  618  Dec  18  22:56  index.htm 

-rw-r-r--  I csev  staff  883  Dec  18  22:57  sites.htm 

-rw-r--r--  I csev  staff  679  Dec  18  22:57  topics.htm 

csev$ 


<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href="sites.htm">Sites</a></li> 

<li><a  href="topics.htm"  >Topics</a></li> 

</ul> 


» 


csev$  Is  -I  AppEngineLeam 

-rw-r-r-  I csev  staff  618  Dec  1 8 22:56  index.htm 

-rw-r-r-  I csev  staff  883  Dec  18  22:57  sites.htm  I Us  Navigation 

-rw-r-r-  I csev  staff  679  Dec  1 8 22:57  topics.htm 

csev$  Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google  Application 
Engine.  We  hope  you  find  www.appcngincleam.com  useful. 
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AppEngineLeam 

Navigation 


Google  App  Engine:  About 
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Me://,' 'Users/csev  'Desktop/teach/©  - 'Or  Google 
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Google  AppEngine: 


Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www  .appenginclcam.com  useful. 


Here  are  some  site; 

• Pvthon  Leam 

• Google  AppEngine  Site 


O O Learning  the  Coogle  AppEngine 
file:///Users/csev/Desktop/teach/©  * (Or  Google  ^ 


'AppEngineLeam 


AppEngine:  Topics 


» Python  Basics 

> Python  Functions 

> Python  Python  Objects 
» Hello  World 

> The  WcbApp  Framework 

> Using  Templates 


csev$  Is  -I 
-rw-r-r—  I csev 
-rw-r-r-  I csev 
-rw-r-r-  I csev 
csev$ 


staff  618  Dec  18  22:56  index.htm 
staff  883  Dec  1 8 22:57  sites.htm 
staff  679  Dec  1 8 22:57  topics.htm 


We  create  the 
appearance  of  a fixed 
“menu”  by  including  the 
navigation  at  the  same 
place  in  each  page. 


Special  File  Names 

• When  a URL  points  to  a directory  in  your  web  server,  it  looks  for  a 
file  with  a special  name: 

• index.html,  index.htm,  index.php,  default.htm,  etc.. 

• While  there  is  a convention,  the  “default  file”  is  configurable  - so 
nothing  is  “sure” 

• Usually  index.htm  or  index.html  is  a safe  bet 

• This  only  works  when  viewing  through  a web  server  - when  viewing 
from  disk,  you  must  view  the  file. 


<body> 

<!—  Make  sure  to  style  the  h I — > 
<h  I >App  Engine:Topics</h  I > 

<ul> 

<li>Python  Basics</li> 

<li>Python  Functions</li> 
<li>Python  Python  Objects</li> 
<!—  Leave  these  two  out  for  a while 
<li>HelloWorld</li> 

<li>The  WebApp  Framework</li> 
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AppEngineLearn 

• Sites 

• Topics 

App  Engine:  Topics 

• Python  Basics 

• Python  Functions 

• Python  Python  Objects 

• Using  Templates 


<li>Using  Templates</li> 
</ul> 

</body> 


HTML  Comments 


Images 
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/i, 


Which  image  to  display 


Begin  Tag 


End  Tag 


Images 


<img  src="appengine.jpg" 
width="l42"  height="  1 09" 
alt="Google  App  Engine  Logo" 
style="float:right"  /> 


Optional  - makes 
display  quicker. 
Will  resize  to  fit. 


Put  the  image  on  the  right 
and  wrap  text  around  it. 


Show  this  when  hovering, 
images  are  off,  or  for 
screen  readers. 


All  information  is  communicated  through  the  attributes  of  the  img  tag. 


Images 

<hl> 

<img  src="appengine.jpg"  width="l42"  height="l09" 
alt="Google  App  Engine  Logo" 
style="float:right"/> 

Google  App  Engine:  About</h  I > 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

In  this  case,  the  file  appengine.jpg  needs  to  be  in  the  same  directory 
as  the  file  index.html. 


<h  I > 


<img  src="appengine.jpg"  width="l42"  height="l09" 
alt="Google  App  Engine  Logo" 
style="float:right"/> 

Google  App  Engine:  About</h  I > 


<P> 


Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 
We  hope  you  find 
www.appenginelearn.com  useful. 

</p> 
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<hl> 

<img  src="appengine.jpg"  width="l42"  height="l09" 
alt="Google  App  Engine  Logo"  /> 
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<hl> 

<img  src="appengine.jpg"  width="l42"  height="l09" 
alt="Google  App  Engine  Logo" 
style="float:right"/> 
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<P> 
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learning  the  Google  Application  Engine. 
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HTML  Document  Structure 


Well-Formed  HTML  Documents 


• Browsers  need  to  know  what  contract  you  are  agreeing  to  (doctype) 

• We  need  a section  for  meta-data  about  the  HTML  document  (head) 

• And  then  the  displayable  content  of  the  HTML  document  (body) 


Outline  of  an  HTML  Document 


<!DOCTYPE  > 
<html> 

<head> 

meta-data.... 

</head> 

<body> 

Page  content.... 
</body> 

</html> 


Contract  about  the 
HTML  style  used 
the  page. 

Metadata  about 
the  page. 


Displayable  content 
of  the  page. 


Outline  of  an  HTML  Document 


A Simple  but  Modern  Page 


<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0 1 //EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 


learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</body> 

</html> 


<title>Learning  the  Google  App  Engine</title> 
</head> 

<body> 

<h  I >Google  App  Engine: About</h  I > 

<?> 

Welcome  to  the  site  dedicated  to 


Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
wwwappenginelcam.com  useful. 


Google  App  Engine:  About 
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Browsers:  Lost  in  Transition 


• Between  1 995  and  2003  browsers  were  different  - often  on 
purpose  to  attempt  to  make  their  market  share  “sticky” 

• At  some  point  we  knew  there  needed  to  be  a future  where 
all  browsers  did  *exactly*  the  same  thing  based  on  CSS  and 
HTML  standards 

• How  to  get  from  “here”  to  “there”  - no  one  could  “win” 


Quirks 

Mode  HTML+ 

Proprietary 

Extensions 

1993 

SIMPLE 

UGLY 

HTML 


Inconsistency 
is  OK 


HTML+ 

Proprietary 

Extensions 


HTML+ 

Proprietary 

Extensions 


1999 


Standard 

Mode 


2008 


Standard 
CSS  and 
HTML 


Web  developers  and 
browsers  are  expected 
to  be  “perfect.” 
Responsibility  goes 
both  ways. 


Designing  for  the  Browsers  out  there... 
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2009 

IE7 

IE6 

August 

15.1% 

13.6% 

July 

15.9% 

14.4% 

June 

18.7% 

14.9% 

May 
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You  get  to  make  a choice 


• (a)  Do  you  want  to  be  lazy  and  sloppy  and  hope  that  your 
pages  look  good  across  multiple  browsers  and  multiple 
versions  of  the  same  browsers 

• (b)  Do  you  want  to  be  professional  and  have  your  pages  to 
render  identically  across  all  browsers? 

• If  you  choose  (b)  - you  take  on  some  additional  responsibility. 


DOCTYPE:  Indicating  your  Choice 


• Browsers  look  at  the  first  line  of  your  HTML  file  to  see  is 
you  have  agreed  to  comply  to  HTML  standards 


<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0 1 //EN" 
"http://www.w3.org/TR/htnnl4/strict.dtd"> 

<html> 

<head> 

<title>Learning  the  Google  App  Engine</title> 

</head> 

<body> 

<h  I >Google  App  Engine: About</h  I > 


Which  DOCTYPE? 


<!doctype  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0 1 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 


<!doctype  HTML  PUBLIC  "-//W3C//DTD  HTML  4.01  Transitional//EN"> 

<!doctype  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0 1 //EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 


http://www.webmasterworld.com/html/306 1 635.htm 


Which  DOCTYPE? 


• Easy  to  start  a fight  - just  Google  “what  is  the  best  doctype” 

• Loose  - legacy 

• Transitional  - Mix  of  Developers 

• Strict  - New  Project  which  can  enforce  rules  from  the  start 

• http://www.webmasterworld.com/html/306 1 635.htm  (and  others) 


Well-Formed  HTML  Documents 


• Browsers  need  to  know  what  contract  you  are  agreeing  to  (doctype) 

• We  need  a section  for  meta-data  about  the  HTML  document 

• And  then  the  displayable  content  of  the  HTML  document 


A Valid  Web  Document 


<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0 1 //EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 


learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</body> 

</html> 


<title>Learning  the  Google  App  Engine</title> 
</head> 

<body> 

<h  I >Google  App  Engine: About</h  I > 

<?> 

Welcome  to  the  site  dedicated  to 


Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
wwwappenginelcam.com  useful. 


Google  App  Engine:  About 


Learning  the  Coogle  App  Engine 


A Valid  Web  Document 


<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0 1 //EN" 


"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<title>Learning  the  Google  App  Engine</title> 
</head> 

<body> 

<h  I >Google  App  Engine: About</h  I > 


Contract  about  the 
HTML  style  used 
the  page. 


Metadata  about 
the  page. 


Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</body> 

</html> 


Displayable  content 
of  the  page. 


Checking  Validity 


• We  can  check  to  see  if  a page  “meets  the  rules”  - does  it  live  up  to  its 
doctype? 

• http://validator.w3.org 

• Enter,  HTML,  upload  a file,  or  enter  a web-accessible  URL 


Validation  Output:  4 Errors 


O Line  13,  Column  7.  end  tag  for " p"  omitted,  but  OMITTAG  NO  was  specified. 

</body  > 

You  may  have  neglected  to  close  an  element,  or  perhaps  you  meant  to  "self-close"  an 
element,  that  is,  ending  it  with  "/>"  instead  of  ">". 

Less-than-successful 


Note: When  the  validator  fails, 
only  look  at  the  first  message 
and  fix  that  - and  then  re-run. 

One  simple  error  will  often 
cascade  into  30-40  “The 
validator  is  lost  and  confused 
errors”. 


Success 


Jump  To:  Notes  and  Potential  Issues  Congratulations  • Icons 


This  document  was  successfully  checked  as  HTML  4.01  Strict! 


Result: 

Passed,  2 warning(s) 

Source : 

<! DOCTYPE  HTML  PUBLIC  "-//YV3C//BTD  HTML  4.01//EN”  W 

^ http://wim.w3.org/TR/html4/stKct.dtd"> 

^<title>Learning  the  Google  App  Enginec/title> 

<h^L>Google  App  Engine:  About</hl> 

^tSp^^ii'f^^  useful 

Encoding : 

Utf-8  [ utf-8  (Unicode,  worldwide)  X J 

Doctype : 

HTML  4.01  Strict  (detect  automatically)  ! 

Root  Element: 

HTML 

<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0 1 //EN" 
"http://www.w3.org/TR/htnnl4/strict.dtd"> 

<html> 

<head> 

<title>Learning  the  Google  App  Engine</title> 

<meta  http-equiv="Content-Type"  content="text/html;charset=utf-8"  > 
</head> 

<body> 

<h  I >Google  App  Engine: About</h  I > 

<?> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</body> 

</html> 


To  fix  the  warning  - we 
add  a header  to  indicate 
the  character  set  of  our 
document. 


Markup  Validation  Service 

Check  the  markup  (HTML,  XHTML)  of  Web  documents 


Jump  To:  Important  Warnings  Validation  Output 


This  page  is  not  Valid  (no  Doctype  found)! 


Result:  Failed  validation,  47  Errors 
Address:  http://www.dr--chuck.com/ 

Encoding  : Utf-8  [ (detect  tutomitically)  T) 

Doctype  : (no  Doctype  found)  | (detect  automatically) 

Root  Element:  html 


<HTML> 

<HEAD> 

<META  NAME="GENERATOR"  CONTENT ="Adobe  PageMill  3.0Win"> 

<TITLE>dr-chuck.com  </TITLE> 

</HEAD> 

<BODY  BGCOLOR="#000000"  LI N K="#AAAAAA" VLI N K="#AAAAAA"  ALINK="#AAAAAA"> 
<table  Border=0> 

<tr> 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN"  "http:// 
www.w3.org/TRyxhtml  I /DTD/xhtml  I -strict.dtd"> 

<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 

<head> 

<title>University  of  Michigan</title> 


Summary 


• HTML  has  gone  through  many  changes  and  evolutions 

• It  started  clean  and  simple  - then  got  ugly  and  nasty  - now  we  are 
back  to  a clean  and  simple  approach 

• HTML  Markup  needs  to  focus  on  meaning  - not  formatting 

• Formatting  is  handled  using  CSS  - Cascading  Style  Sheets 


